import React from "react";
import { useLocation } from "react-router-dom";
import { CartO, ChatO, ShopO } from '@react-vant/icons'
import { ActionBar } from 'react-vant'
import { useDispatch } from "react-redux";
import { addCart } from "../../store/cart/cartSlice";
const Detail = () => {
  const location = useLocation();
  const v = location.state;
  const dispatch = useDispatch()
  const handleClick = () => {
    // 加入
    // dispatch 
    dispatch(addCart(v))
  }
  return (
    <div>
      <img src={v.image} alt="" width="100%" />
      <div className="desc">{v.desc}</div>
      <div className="price">{v.price}</div>

      <ActionBar>
        <ActionBar.Icon
          icon={<ChatO />}
          text="客服"
          onClick={() => console.log("chat click")}
        />
        <ActionBar.Icon
          icon={<CartO />}
          text="购物车"
          onClick={() => console.log("cart click")}
        />
        <ActionBar.Icon
          icon={<ShopO />}
          text="店铺"
          onClick={() => console.log("shop click")}
        />
        <ActionBar.Button
          type="danger"
          text="立即购买"
          onClick={() => handleClick() }
        />
      </ActionBar>
    </div>
  );
};

export default Detail;
